<template>
  <div :class="classId">
    <div class="title">
      <slot name='title'></slot>
    </div>

    <div class="text-item" v-for="(item, index) in data" :key="index">
      <div class="label">{{ item.label }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextDescription',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: 'label'
    },
    valueKey: {
      type: String,
      default: 'value'
    }
  },
  computed: {
    // 生成随机的class 避免和全局样式重名
    classId () {
      return `description-box-${Date.now()}`
    }
  },
  data () {
    return {
      data: []
    }
  },
  mounted () {
    let list = this.list || []
    if (this.label !== 'label' && this.valueKey !== 'value') {
      this.changeData(list)
    } else {
      this.data = list
    }
  },
  methods: {
    changeData (list) {
      this.data = list.map(item => {
        return {
          label: item[item[this.label]],
          value: item[item[this.valueKey]]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
*[class^='description-box-'] {
  .title {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: #444;
  }
  .title::before {
    display: inline-block;
    content: " ";
    width: 4px;
    vertical-align: bottom;
    height: 18px;
    background: #409EFF;
    margin-right: 4px;
  }
  .text-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;

    .label {
      margin-right: 8px;
      color: #000;
      font-weight: 700;
    }
  }
}
</style>
